<template>
  <div>
    <h3 style="letter-spacing: 1px;font-weight: 400;padding-bottom: 20px">基本设置</h3>

    <div>
      <el-form style="width: 350px;float: left" label-position="top" ref="form" :model="user" label-width="80px" :rules="rules">
        <el-form-item style="padding: 0" label="昵称" prop="nickname">
          <el-input v-model="user.nickname" placeholder="2-15个字"></el-input>
        </el-form-item>
        <el-form-item style="padding-top: 12px" label="电话号码" prop="phone" >
          <el-input v-model="user.phone" placeholder="请认真填写您的手机号哦"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender" style="padding-top: 12px">
          <el-select style="width: 200px" v-model="user.gender" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生年月" prop="birthday">
          <el-col>
            <el-date-picker
              type="date" placeholder="选择日期"
              v-model="user.birthday"
              value-format="yyyy-MM-dd"
              :picker-options="birthday"
              style="width: 100%;"/>
          </el-col>
        </el-form-item>
        <el-form-item style="padding: 0" label="邮箱" prop="email">
          <el-input type="email" v-model="user.email"></el-input>
        </el-form-item>
        <el-form-item label="个人简介" prop="info">
          <el-input :rows="3" type="textarea" v-model="user.info" placeholder="最多输入100个字" maxlength="100"></el-input>
        </el-form-item>
        <el-form-item style="padding-top: 10px; transform: translate(140%, -400%);">
          <el-button type="primary" @click="onSubmit">保存信息</el-button>
        </el-form-item>
      </el-form>
      <div>
        <img style="padding-bottom: 10px;padding-left: 150px;width: 150px; height: 150px;" alt=""
             :src="user.avatar">
        <el-upload
          style="padding-left: 500px;letter-spacing: 1px"
          class="upload-demo"
          accept=".png,.jpg"
          :headers="header"
          :action="uploadAction"
          :on-success="handleUploadSuccess"
          multiple
          :limit="1">
          <el-button style="width: 150px" size="small" type="primary">
            <i class="el-icon-upload2"></i> 点击上传
          </el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
        </el-upload>
      </div>
    </div>
  </div>
</template>

<script>
  import {findById, updateUser} from "@/api/user";
  import config from "@/config";

  export default {

    data() {
      return {
        rules: {
          nickname: [
            { required: false, min:2, max: 15,message: '请输入2-15位数的昵称！', trigger: 'blur' },
          ],
          info: [
            { required: false, max: 100, trigger: 'blur' },
          ],
          phone: [
            { required: true, message: '手机号码不能为空！', trigger: 'blur' },
            {
              validator: function(rule, value, callback) {
                if (/^1[34578]\d{9}$/.test(value) == false) {
                  callback(new Error("手机号格式错误"));
                } else {
                  callback();
                }
              },
              trigger: "change"
            }
          ],
          email: [
            {
              validator: function(rule, value, callback) {
                if (value == null || value == '' || value == undefined) {
                  callback();

                } else {
                  if (/^\w{1,64}@[a-z0-9\-]{1,256}(\.[a-z]{2,6}){1,2}$/i.test(value) == false) {
                    callback(new Error("邮箱格式错误"));

                  }
                }
              },
              trigger: "blur"
            }
          ],

        },
        header: {
          "Authorization": localStorage.getItem("token")
        },
        uploadAction: config.API_URL + '/upload',
        user: {
          nickname: '',
          password: '',
          email: '',
          birthday: '',
          gender: '',
          info: '',
          avatar: ''
        },
        // 时间判断
        birthday: {
          disabledDate: time => {
              return (time.getTime() > Date.now() - 8.64e7)
          },
        },
      }
    },

    mounted() {
      if (localStorage.getItem("uid") !== null) {
        findById(localStorage.getItem("uid")).then(res => {
          this.user = res.data;
        })
      }
    },

    methods: {

      onSubmit() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            updateUser(this.user).then(res => {
              if (res.success) {
                this.user = res.data;
                this.$message({
                  type: 'success',
                  message: '用户基本信息更新成功!'
                });
              }
            })
          } else {
            this.$message.error('请先完善表单相关信息！');
            return false;
          }
        });
      },

      handleUploadSuccess(res) {
        this.user.avatar = res;
        updateUser(this.user).then(res => {
          if (res.success) {
            this.user = res.data;
            this.$message({
              type: 'success',
              message: '头像上传成功!'
            });
          }
        })
      }

    },

  }

</script>

<style scoped>
  >>> .el-form--label-top .el-form-item__label {
    padding: 0;
  }

  .el-form-item {
    margin-bottom: 5px;
  }
</style>
